{% extends 'index/index.html' %}

{% block list_notes %}
    <style>
        .layui-panel h2 {
            height: 100px;
            width: 100%;
            padding: 30px;

        }
    </style>
    {% if count == 0 %}
        <div>
            <span>还没有笔记，点击添加</span>
        </div>
    {% endif %}
    <input type="button" value="添加" class="layui-btn layout-btn-primary" id="btn-add">

    <div id="note-list">
        {% if count > 0 %}
            <table class="layui-table" id="note-table" lay-data="{page:true, limit:5}">
                <thead>
                <tr>
                    <th lay-data="{field:'id', width:80, sort: true}">ID</th>
                    <th lay-data="{field:'title', width:200}">标题</th>
                    <th lay-data="{field:'created_time', width:280, sort: true}">创建时间</th>
                    <th lay-data="{field:'update_time', width:280, sort: true}">修改时间</th>
                    <th lay-data="{field:'opration', width:280, escape: false}">操作</th>
                </tr>
                </thead>
                <tbody>
                {% for note in notes %}
                    <tr>
                        <td>{{ note.id }}</td>
                        <td>{{ note.title }}</td>
                        <td>{{ note.created_time }}</td>
                        <td>{{ note.updated_time }}</td>
                        <td>
                            <a class="layui-btn layui-btn-normal btn-detail layui-btn-sm" href="/note/detail?id={{ note.id }}">
                                <i class="layui-icon layui-icon-search"></i>
                                查看
                            </a>
                            <a class="layui-btn layui-btn-sm" href="/note/update?id={{ note.id }}">
                                <i class="layui-icon layui-icon-edit"></i>
                                修改
                            </a>
                            <div class="layui-btn layui-btn-danger layui-btn-sm btn-rm" id="btn-rm-{{ note.id }}">
                                <i class="layui-icon layui-icon-delete"></i>
                                删除
                            </div>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        {% endif %}
    </div>
    <script>
    //
        $(document).ready(function () {
            layui.use('layer')
            var layer = layui.layer

            const toAdd = () => {
                window.location.assign('/note/add')
            }
            $('#btn-add').on('click', toAdd);


            $('.btn-rm').click(async function () {
                var ele_id = $(this).attr("id");
                var id = parseInt(ele_id.substring(7, ele_id.length))
                data = new FormData();
                data.append('id', id);
                let res = await axios.post('/note/delete/', data)
                layer.msg(res.data.msg)
                if (res.data.code === 200) {
                    setTimeout(function () {
                        window.location.assign('/user/notes')
                    }, 500)

                }
            });

        })

    </script>

{% endblock %}